<template>
  <div class="prizepanel" :data="rankprize.prizetype" >
    <alert v-model="alert.show" :title="alert.title" > {{ alert.msg}}</alert>
    <div class="contianer">

     <!-- 手机实物奖励 -->
    <template v-if="rankprize.prizetype==1||rankprize.prizetype==2||rankprize.prizetype==3||rankprize.prizetype==6">
         <div class="address">
          <!-- <p class="input-group"><label for="">手机号码：</label><input type="text" :readonly="readonly" v-model="bindPhone"></p> -->
          <p class="input-group"></p>
          <p class="info">排名活动奖品将在活动结束后的15个工作日内，将会有江西联通官方微信客服电话联系您，请注意保持手机畅通。</p>
        </div>
    </template>
     <!-- <p class="sub-btn" v-if="prize.prizetype!=6&&prize.status==0" @click.passive="receivePrize(prize.prizetype)">提交</p> -->
     <x-icon type="ios-close" size="36"  class="icon-red close-panel" @click.passive="closePanel()"></x-icon>
    </div>
  </div>
</template>
<script>
import Qs from "qs";
import {
  getServerHost,
  preventMove,
  GetRequest,
  checkMobile,
  checkQq
} from "@/assets/lib/tool.js";
import { Alert } from "vux";
export default {
  components: {
    Alert
  },
  props: {
    rankprize: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      openid: GetRequest().openid,
      getWangkaUrl: "/wxjx/goddess/common/prize/getWangka",
      getXiaomingUrl: "/wxjx/goddess/common/prize/getXiaoming",
      getVivoUrl: "/wxjx/goddess/common/prize/getVivo",
      flowRechargeUrl: "/wxjx/goddess/common/prize/flowRecharge",
      bindPhone: "",
      readonly: false,
      prizeInfo: this.rankprize,
      alert: {
        show: false,
        title: "",
        msg: ""
      }

    };
  },
  watch: {

  },
  mounted() {

  },
  methods: {
    closePanel() {
      this.$emit("closepanel", true);
    },
    //检测填写信息
    judgeInfo(data) {
      var vm = this;
      let flag = 0;
      for (let name in data) {
        data[name] = data[name] || "";
        // console.log("boolean", data[name]);
        if (!Boolean(data[name])) {
          vm.alert = {
            show: true,
            title: "提示",
            msg: "请填写完信息"
          };
          flag = 1;
          return flag;
        }
      }
      return flag;
    },
    //根据提交的信息显示
    //领取奖品
    receivePrize(type, flowtype) {
      flowtype = flowtype || 0;
      // console.log('type',type);
      // console.log('flowtype',flowtype);
      var vm = this;
      // console.log("vm.prize.status", vm.prize.status);
      var prize = {
        url: "",
        data: ""
      };
      vm.readonly = false;
      switch (type) {
        case 1:
          prize = {
            url: vm.getXiaomingUrl,
            data: vm.xiaoming
          };
          if (vm.judgeInfo(prize.data)) {
            return;
          }
          break;
        case 2:
          prize = {
            url: vm.getWangkaUrl,
            data: vm.wangka
          };
          // console.log(prize.data);
          if (vm.judgeInfo(prize.data)) {
            return;
          }
          break;
        case 3:
          prize = {
            url: vm.getVivoUrl,
            data: vm.vivo
          };
          if (vm.judgeInfo(prize.data)) {
            return;
          }
          break;
        case 4:
          // 滴滴出行 直接显示绑定手机号
          break;
        case 5:
          break;
        case 6:
          vm.flow.type = flowtype;
          prize = {
            url: vm.flowRechargeUrl,
            data: vm.flow
          };
          break;
        case 7:
          break;
        case 8:
          break;
      }
      // console.log(prize);

      this.$http(getServerHost() + prize.url, {
        params: prize.data
      }).then(result => {
        result = result.data;
        if ("200" == result.code) {
          //关闭弹窗
          vm.closePanel();
          vm.alert = {
            show: true,
            title: "提示",
            msg: result.msg
          };
        } else if ("999" == result.code) {
          vm.alert = {
            show: true,
            title: "提示",
            msg: result.msg
          };
        }
        // console.log(result);
      });
    }
  }
};
</script>
<style lang="less" scoped>
.none {
  display: none;
}
.prizepanel {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  background: rgba(0, 0, 0, 0.1);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
  .contianer {
    position: relative;
    top: 15%;
    width: 563px;
    min-height: 358px;
    padding: 40px;
    margin: 0 auto;
    background: url("../../assets/img/panel.png") no-repeat;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    .xiaoming {
      color: #444444;
      p {
        padding: 15px 0;
        a {
          text-decoration: underline;
        }
      }
    }
    .address {
      padding: 20px 0;
      .input-group {
        padding: 10px 0;
        display: flex;
        label {
          width: 30%;
        }
        input {
          width: 70%;
          height: 40px;
        }
      }
      .info {
        line-height: 1.5em;
        color: #ff354f;
      }
    }
    .txtv {
      .input-group {
        padding: 10px 0;
        text-align: center;
      }
    }
    .liuliang {
      .input-group {
        padding: 60px 0;
        .flow {
          font-size: 30px;
          font-weight: bold;
        }
      }
      .btn-group {
        display: flex;
        justify-content: space-around;
        span:nth-child(1) {
          width: 194px;
          height: 57px;
          background: url("../../assets/img/rec-btns.png") no-repeat;
          background-size: 426px 57px;
        }
        span:nth-child(2) {
          width: 194px;
          height: 57px;
          background: url("../../assets/img/rec-btns.png") no-repeat -228px 0;
          background-size: 426px 57px;
        }
      }
    }
    .sub-btn {
      margin: 0 auto;
      width: 198px;
      height: 52px;
      font-weight: bold;
      line-height: 52px;
      border-radius: 0.05rem;
      background: #ffbd0f;
    }
    .close-panel {
      align-self: center;
      position: relative;
      top: 180px;
    }
  }
}
</style>
